import { useState,useEffect } from 'react'
import axios from 'axios'
import { useRequest } from 'ahooks'
import LazyLoad from 'react-lazyload'

function App() {
  const getMovie = () => {
    return new Promise((resolve,reject) => {
    axios.get('init_movie')
        .then(res => {
          console.log(res)
          resolve(res.data.data)
        })
  })}

  // useEffect(() => {
    let { data:movies,error,loading } = useRequest(getMovie)
  // },[])

  // useEffect(() => {
  //   axios.get('init_movie')
  //     .then(res => {
  //       console.log(res)
  //     })
  // },[])

  return (
    <div className="App">
     {error && <div>出错了</div>}
     {loading && <div>加载中...</div>}
     {movies && movies.map((movie) => 
      <div key={movie.id}>
        <div>{movie.title}</div>
        <div>{movie.content}</div>
        <div>
          <LazyLoad>
            <img src={movie.avatar}/>
          </LazyLoad>
        </div>
      </div>
      )}
    </div>
  )
}

export default App
